<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import type { Permission } from "../../../model"; //导入自定义数据类型
import { addAdmin, updateAdmin, getPermissionList } from "../../../api"; //数据接口
//获得当前组件属性
const props = defineProps(["isShow", "admin"]);
//自定义事件
const emit = defineEmits(["closeDialog"]);
//角色数据对象
const permissionData = ref<Permission[]>([]);
//定义表单数据对象
const formObj = reactive({
  username: "",
  password: "",
  permission: "",
});
const formRef = ref<FormInstance>();
//定义表单验证规则
const rules = reactive({
  username: [
    { required: true, message: "管理员名称不能为空", trigger: "blur" },
  ],
  password: [
    { required: true, message: "管理员密码不能为空", trigger: "blur" },
  ],
  permission: [
    { required: true, message: "管理员角色不能为空", trigger: "blur" },
  ],
});
//表单提交，添加或修改用户
async function submitForm() {
  await formRef.value?.validate(async (valid, _fields) => {
    if (valid) {
      var res = null;
      if (props.admin.id == 0) {
        //添加用户
        const data = {
          username: formObj.username,
          password: formObj.password,
          permission: formObj.permission,
          salt: "",
          avatar: "",
          sort: 1,
          state: false,
        };
        res = await addAdmin(data);
      } else {
        //修改用户
        const data = {
          id: props.admin.id,
          username: formObj.username,
          password: formObj.password,
          permission: formObj.permission,
          salt: props.admin.salt,
          avatar: props.admin.avatar,
          state: props.admin.state,
          sort: props.admin.sort,
        };
        res = await updateAdmin(data);
      }
      if (res.data.errno == 0) {
        //发送自定义事件
        emit("closeDialog");
        //添加或修改成功
        ElMessage.success(res.data.errmsg);
      } else {
        //添加或修改失败
        ElMessage.error(res.data.errmsg);
      }
    }
  });
}
//初始化表单
function initForm() {
  if (props.admin.id != 0) {
    formObj.username = props.admin.username;
    formObj.password = "";
    formObj.permission = props.admin.permission;
  } else {
    formObj.username = "";
    formObj.password = "";
    formObj.permission = "";
  }
}
//查询所有角色数据
async function loadPermissionList() {
  const res = await getPermissionList();
  permissionData.value = res.data.data;
}
//监听当前组件属性是否发生变化
watch(props, () => {
  initForm();
});
//组件加载完成
onMounted(() => {
  initForm();
  loadPermissionList();
});
</script>
<template>
  <el-form
    ref="formRef"
    :model="formObj"
    :rules="rules"
    label-width="120"
    status-icon
  >
    <el-form-item label="管理员名称" prop="username">
      <el-input
        v-model="formObj.username"
        style="width: 400px"
        placeholder="请填写管理员
名称"
      ></el-input>
    </el-form-item>
    <el-form-item label="管理员密码" prop="password">
      <el-input
        v-model="formObj.password"
        style="width: 400px"
        placeholder="请填写管理员
密码"
        type="password"
      ></el-input>
    </el-form-item>
    <el-form-item label="管理员角色" prop="permission">
      <el-select
        v-model="formObj.permission"
        style="width: 200px"
        placeholder="请选择管理
员角色"
      >
        <el-option
          v-for="item in permissionData"
          :label="item.permission"
          :value="item.permission"
          :key="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="">
      <el-button type="primary" @click="submitForm">{{
        props.admin.id == 0 ? "新增" : "修改"
      }}</el-button>
      <el-button @click="initForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>
